import React from 'react'
import { Card, Row, Col, Statistic, Progress, Table, Typography, Space, Tag } from 'antd'
import { 
  UserOutlined, 
  ShoppingCartOutlined, 
  DollarOutlined, 
  RiseOutlined,
  FallOutlined 
} from '@ant-design/icons'
import { useAppSelector } from '@/store'

const { Title } = Typography

const Dashboard: React.FC = () => {
  const { user } = useAppSelector((state) => state.auth)

  // 模拟数据
  const recentOrders = [
    {
      key: '1',
      orderId: 'ORD-001',
      customer: '张三',
      product: 'iPhone 15',
      amount: 8999,
      status: '已完成',
      date: '2024-01-15',
    },
    {
      key: '2',
      orderId: 'ORD-002',
      customer: '李四',
      product: 'MacBook Pro',
      amount: 15999,
      status: '处理中',
      date: '2024-01-14',
    },
    {
      key: '3',
      orderId: 'ORD-003',
      customer: '王五',
      product: 'AirPods Pro',
      amount: 1999,
      status: '已发货',
      date: '2024-01-13',
    },
  ]

  const columns = [
    {
      title: '订单号',
      dataIndex: 'orderId',
      key: 'orderId',
    },
    {
      title: '客户',
      dataIndex: 'customer',
      key: 'customer',
    },
    {
      title: '产品',
      dataIndex: 'product',
      key: 'product',
    },
    {
      title: '金额',
      dataIndex: 'amount',
      key: 'amount',
      render: (amount: number) => `¥${amount.toLocaleString()}`,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const color = status === '已完成' ? 'green' : status === '处理中' ? 'blue' : 'orange'
        return <Tag color={color}>{status}</Tag>
      },
    },
    {
      title: '日期',
      dataIndex: 'date',
      key: 'date',
    },
  ]

  return (
    <div style={{ padding: 0 }}>
      <Title level={2} style={{ marginBottom: '8px' }}>仪表板</Title>
      <p style={{ marginBottom: '16px' }}>欢迎回来，{user?.name}！</p>

      {/* 统计卡片 */}
      <Row gutter={[16, 16]} style={{ marginBottom: '16px' }}>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="总用户数"
              value={11280}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#3f8600' }}
            />
            <div style={{ marginTop: '8px' }}>
              <RiseOutlined style={{ color: '#3f8600' }} /> +12%
            </div>
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="总订单数"
              value={8846}
              prefix={<ShoppingCartOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
            <div style={{ marginTop: '8px' }}>
              <RiseOutlined style={{ color: '#1890ff' }} /> +8%
            </div>
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="总收入"
              value={112893}
              prefix={<DollarOutlined />}
              valueStyle={{ color: '#cf1322' }}
              suffix="元"
            />
            <div style={{ marginTop: '8px' }}>
              <RiseOutlined style={{ color: '#cf1322' }} /> +15%
            </div>
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="转化率"
              value={93.2}
              suffix="%"
              valueStyle={{ color: '#722ed1' }}
            />
            <div style={{ marginTop: '8px' }}>
              <FallOutlined style={{ color: '#722ed1' }} /> -2%
            </div>
          </Card>
        </Col>
      </Row>

      {/* 进度条 */}
      <Row gutter={[16, 16]} style={{ marginBottom: '16px' }}>
        <Col xs={24} md={12}>
          <Card title="销售目标完成情况">
            <Space direction="vertical" style={{ width: '100%' }}>
              <div>
                <span>本月目标</span>
                <span style={{ float: 'right' }}>75%</span>
              </div>
              <Progress percent={75} status="active" />
              <div>
                <span>季度目标</span>
                <span style={{ float: 'right' }}>45%</span>
              </div>
              <Progress percent={45} />
              <div>
                <span>年度目标</span>
                <span style={{ float: 'right' }}>28%</span>
              </div>
              <Progress percent={28} />
            </Space>
          </Card>
        </Col>
        <Col xs={24} md={12}>
          <Card title="用户活跃度">
            <Space direction="vertical" style={{ width: '100%' }}>
              <div>
                <span>日活跃用户</span>
                <span style={{ float: 'right' }}>89%</span>
              </div>
              <Progress percent={89} strokeColor="#52c41a" />
              <div>
                <span>周活跃用户</span>
                <span style={{ float: 'right' }}>67%</span>
              </div>
              <Progress percent={67} strokeColor="#1890ff" />
              <div>
                <span>月活跃用户</span>
                <span style={{ float: 'right' }}>34%</span>
              </div>
              <Progress percent={34} strokeColor="#722ed1" />
            </Space>
          </Card>
        </Col>
      </Row>

      {/* 最近订单 */}
      <Card title="最近订单">
        <Table
          columns={columns}
          dataSource={recentOrders}
          pagination={false}
          size="small"
        />
      </Card>
    </div>
  )
}

export default Dashboard 